<!--评估任务 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" v-if="rolesStr === 'zhpgzz'">
          <el-form-item label="月份:">
            <el-date-picker
              format="yyyy-MM"
              value-format="yyyy-MM"
              type="month"
              v-model="queryParams.queryStartTime"
              placeholder="选择月份">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="业务:">
            <el-select filterable clearable v-model="queryParams.evaluateQuestBusiness">
              <el-option v-for="(item,index) in businessList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="queryParams.evaluateQuestState" placeholder="用户状态" clearable style="width: 250px">
              <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
                :value="dict.label" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryList">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form inline  label-position="left" v-else>
          <el-form-item label="业务：">
            <el-select filterable clearable placeholder="请选择业务" v-model="expertForm.evaluateQuestBusiness">
              <el-option v-for="(item,index) in businessList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评估周期：">
            <el-select filterable clearable placeholder="请选择周期" v-model="expertForm.evaluateQuestCycle">
              <el-option v-for="(item,index) in cycleList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评估任务名称：">
            <el-input v-model="expertForm.evaluateQuestTitle"></el-input>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select filterable clearable placeholder="请选择状态" v-model="expertForm.evaluateQuestState">
              <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
                         :value="dict.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="评估时间范围：">
            <el-date-picker
              v-model="timeValue"
              type="daterange"
              range-separator="至"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryList">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery2">重置</el-button>
          </el-form-item>
        </el-form>
<!--        <el-form>-->
<!--        </el-form>-->
        <el-table v-loading="loading" :data="tableList" border>
          <el-table-column label="序号" width="50" align="center" type="index" ></el-table-column>
          <el-table-column label="评估任务名称" align="center"  prop="evaluateQuestTitle"></el-table-column>
          <el-table-column label="业务" align="center" prop="evaluateQuestBusiness">
          </el-table-column>
          <el-table-column label="评估周期" align="center" prop="evaluateQuestCycle">
          </el-table-column>
          <el-table-column label="评估项" align="center">
            <template slot-scope="scope">
              {{scope.row.evaluateQuestIndexSum}}项
            </template>
          </el-table-column>
          <el-table-column label="开始时间" align="center"  show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.startTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.evaluateQuestState}}</span>
            </template>
          </el-table-column>
          <el-table-column label="评估专家" align="center" prop="evaluateExpertNames">
<!--            <template slot-scope="scope">-->
<!--              <span></span>-->
<!--            </template>-->
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" @click="toDetail(scope.row)">评估</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="height: 50px;display: flex;align-items: center;justify-content: center;">
          <el-pagination background layout="prev, pager, next" :total="total" @current-change="onPageChange"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryExpertData, queryLeaderData } from '@/api/eval'
import { mapGetters } from 'vuex'
import someQuery from '@/mixins/search'
  export default {
    name: "User",
    dicts: ["sys_normal_disable", "sys_user_sex"],
    mixins:[someQuery],
    data() {
      return {
        total: 0,
        // 遮罩层
        loading: false,
        tableList:[],
        //数据
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          evaluateQuestBusiness:'',//业务
          evaluateQuestState:'',//状态
          queryStartTime:''
        },
        timeValue:'',
        expertForm:{ //专家的查询
          pageNum: 1,
          pageSize: 10,
          evaluateQuestBusiness:'',//业务
          evaluateQuestCycle:'',//周期
          evaluateQuestState:'',//状态
          evaluateQuestTitle:'',//评估任务名称
          // params:{
          //   beginTime:'',//开始时间
          //   endTime:'',//结束时间
          // }
        },
        rolesStr:'',//角色
      };
    },
    watch: {
      timeValue:{
        handler:function(newVal,oldVal) {
          if (newVal instanceof Array) {
            this.expertForm.params.beginTime = newVal[0] + ' 00:00:00'
            this.expertForm.params.endTime = newVal[1] + ' 23:59:59'
          }else {
            this.expertForm.params = {}
          }
        },
        deep:true
      }
    },
    created() {
      this.rolesStr = this.roles[0]
      this.queryList()
    },
    methods: {
      // 跳转详情页面
      toDetail(item) {
        this.$router.push({
          path: this.rolesStr === 'zhpgzz' ? 'task' : '/evaluate/task2',
          query:{
            id:item.evaluateQuestId,
            hsitoryQuestId:item.id,
          }
        });
      },
      // 分页查询
      queryList () {
        if (this.rolesStr === 'zhpgzz') { //组长
          console.log('走组长')
          queryLeaderData(this.queryParams).then((res) => {
            this.tableList = []
            this.loading = true
            this.total = res.total
            this.tableList = res.rows
            this.loading = false
          })
        }else {
          console.log('走专家')
          queryExpertData(this.expertForm).then((res) => { //专家
            this.tableList = []
            this.loading = true
            this.total = res.total
            this.tableList = res.rows
            this.loading = false
          })
        }
      },
      // 分页
      onPageChange(e) {
        this.rolesStr === 'zhpgzz' ? this.queryParams.pageNum = e : this.expertForm.pageNum = e
        this.queryList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        for (let key in this.queryParams) {
          if (typeof this.queryParams[key] === 'string') {
            this.queryParams[key] = ''
          }
        }
      },
      resetQuery2() {
        for (let key in this.expertForm) {
          if (typeof this.expertForm[key] === 'string') {
            this.expertForm[key] = ''
          }
        }
        this.timeValue = ''
      },
    },
    computed:{
      ...mapGetters(['roles'])
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__header {
    background-color: #354161;
    padding-bottom: 20px;
  }

  ::v-deep .el-dialog__footer {
    background-color: #f1f2f4;
    padding-top: 20px;
  }

  ::v-deep .el-dialog__title {
    color: white;
  }

  ::v-deep .czlialog {
    margin-top: 20vh;
  }

  .flex-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .inner-container {
    width: 80%;
  }

  .info-row {
    height: 40px;
  }

  .flex-row {
    display: flex;
    align-items: center;
  }

  .label {
    width: 30%;
    text-align: right;
    margin-right: 10px;
    font-weight: 900;
  }

  .value {
    width: 70%;
  }

  /* Assuming el-input is a custom component, you might need additional styling */
  .input-field {
    width: 70%;
  }

  /* 头部 */
  .task_top {
    height: 150px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
  }

  .task_top_1 {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .task_top_1 p {
    font-size: 20px;
    color: rgb(40, 121, 228);
    font-family: "微软雅黑";
    font-weight: bold;
  }

  .task_top_1 span {
    font-size: 15px;
    color: #bbb;
    font-family: "微软雅黑";
    margin-left: 20px;
    transform: translateY(3px);
  }

  .task_top_2 {
    margin-top: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 15px;
  }

  ::v-deep .el-select.el-select--medium {
    width: 100%;
  }

  ::v-deep .blue label {
    color: blue;
  }
</style>
